<template>
  <div>
    <el-dialog title="详细信息" :visible.sync="isShow" width="800px" :close-on-click-modal="false" @close="closeUserMod"
      @open="openUpdate">
      <div v-loading="loading">
        <el-card>
          <el-form size="mini" ref="newUserDate" :model="newUserDate"  inline label-width="120px"
            label-position="left">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item prop="appId" label="应用编号:">
                  <el-input v-model="newUserDate.appId" :disabled="true" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="userNum" label="角色编号:">
                  <el-input v-model="newUserDate.userNum" :disabled="true" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item prop="RoleName" label="角色名称:">
                  <el-input v-model="newUserDate.RoleName" :disabled="true" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="RoleClass" label="角色分类">
                     <el-input v-model="newUserDate.RoleClass"  :disabled="true" ></el-input>
                  </el-form-item>
              </el-col>
            </el-row>
           <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item prop="LegalPersonNum" label="法人号:">
                  <el-input v-model="newUserDate.LegalPersonNum" :disabled="true" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="LegalPersonName" label="法人名称:">
                  <el-input v-model="newUserDate.LegalPersonName" :disabled="true" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item prop="MutualExclRole" label="互斥角色">
                     <el-select v-model="newUserDate.MutualExclRole"  :disabled="true">
                  </el-select>
                  </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="10">
               <el-col :span="12">
                  <el-form-item prop="EffeDate" label="生效日期">
                    <!-- datePicker -->
                     <el-input v-model="newUserDate.EffeDate" :disabled="true" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="ExpiDate" label="失效日期">
                    <!-- datePicker -->
                     <el-input v-model="newUserDate.ExpiDate" :disabled="true" ></el-input>
                  </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="10">
               <el-col :span="12">
                  <el-form-item prop="SortNum" label="排序号">
                    <el-input-number v-model="newUserDate.SortNum" label="排序号" :disabled="true"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="rolestatus" label="角色状态">
                   <el-input v-model="newUserDate.rolestatus" :disabled="true" ></el-input>
                  </el-form-item>
                </el-col>
            </el-row>
          </el-form>
        </el-card>
        <div style="text-align:right;margin:20px 0">
          <el-button type="primary" @click="cancleUserMod" size="mini">确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import createUser from "@/message/userManage/user/user-create";
  import toolBox from "@/common/utils/toolBox";
  import request from "@/common/utils/request";
  import getGlobalParams from "@/common/utils/getGlobalParams";
  export default {
    name: "roleInfoManage",
    data() {
      return {
        postStatus:{},
        roleclass:{},
         innerVisible: false,
        loading: false,
        newUserDate: { //表单信息
        appId: "",
        userNum: "",
        RoleName: "",
        RoleClass: "",
        LegalPersonNum: "",
        LegalPersonName:"",
        MutualExclRole: [],
        EffeDate: "",
        ExpiDate: "",
        SortNum: "",
        rolestatus: ""
        },
      };
    },
    props: { //父元素传递的数据
      option: Object
    },
    computed: {
      isShow: { //修改用户弹窗是否显示
        get: function () {
          return this.option.isShow;
        },
        set: function (newValue) {
          this.option.isShow = newValue;
        }
      },
    },
    methods: {
       handleChange1(value) {
        console.log(value);
      },
      /*    dataFormat(row, column) {
      //枚举设备形式
    if(column.property == 'rolestatus')
      return this.postStatus[row[column.property]];
      if(column.property == 'RoleClass')
      return this.roleclass[row[column.property]];
    }, */
      openUpdate() { //打开弹窗事件
      console.log(this.option.currentRow)
        this.postStatus = getGlobalParams.get("postStatus");
        this.roleclass = getGlobalParams.get("roleclass");
        this.newUserDate.appId = this.option.currentRow[0].appnum;
        this.newUserDate.userNum = this.option.currentRow[0].rolenum;
        this.newUserDate.RoleName =this.option.currentRow[0].rolename;
        this.newUserDate.EffeDate =this.option.currentRow[0].effedate;
        this.newUserDate.ExpiDate =this.option.currentRow[0].expidate;
        this.newUserDate.MutualExclRole =this.option.currentRow[0].mutualexclrole;
        this.newUserDate.SortNum =this.option.currentRow[0].sortnum;
        this.newUserDate.RoleClass =this.roleclass[this.option.currentRow[0].roleclass];
        this.newUserDate.rolestatus = this.postStatus[this.option.currentRow[0].rolestatus];
        this.newUserDate.LegalPersonNum = this.$store.getters.LegalPersonNum;
        this.newUserDate.LegalPersonName = this.$store.getters.LegalPersonName;
        
        
      },
      cancleUserMod() { //关闭弹窗事件，清楚表单验证
        this.option.isShow = false;
        this.$refs.newUserDate.clearValidate();
      },
      closeUserMod() { //修改弹窗关闭
        this.$refs.newUserDate.clearValidate();
      },
    }
  };

</script>

<style lang="scss" scoped>
  .content {
    display: flex;
    flex-direction: column;
  }

  .require {
    color: red;
  }

  .dialog-text {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: red;
    font-size: 18px;
  }

  .role {
    width: 95%;
    border: 1px solid #eee;
    border-radius: 4px;
    height: 290px;

    .roleHeader {
      color: #606266;
      font-weight: 500;
      font-size: 14px;
      background: #f5f7fa;
      height: 42px;
      box-sizing: border-box;
      padding: 9px;
      overflow-y: auto;
    }
  }

  .el-dialog__body {
    padding: 20px;
    padding-top: 10px;
  }

  .el-card {
    overflow: inherit;
  }

</style>
